<template>
	<view :style="getStyle" :class="getClass" @tap.stop="eventFn(nRes)">
		<block v-for="(item, index) in nRes.elements" :key="index">
			<block v-if="item.type == 'QS-Navbar'" @tap.stop="eventFn(item)">
				<QS-Navbar 
				:compClass="item.attributes.compClass" 
				:compStyle="item.attributes.compStyle" 
				:fixed="item.attributes.fixed"
				:backgroundColor="item.attributes.backgroundColor"
				:statusBar="item.attributes.statusBar"
				:navbarItems="item.attributes.navbarItems"
				:diffMenuButtonInfo="item.attributes.diffMenuButtonInfo"
				:hasPlacherholder="item.attributes.hasPlacherholder"
				:zIndex="item.attributes.zIndex"
				:relaunchPath="item.attributes.relaunchPath"
				@click="QSNavbarClick"
				></QS-Navbar>
			</block>
			<block v-else-if="item.type == 'QS-Tabs'" @tap.stop="eventFn(item)">
				<QS-Tabs 
				:compClass="item.attributes.compClass" 
				:compStyle="item.attributes.compStyle"
				:width="item.attributes.width"
				:height="item.attributes.height"
				:tabs="item.attributes.tabs"
				:space="item.attributes.space"
				:autoScrollInto="item.attributes.autoScrollInto"
				:activeFontSize="item.attributes.activeFontSize"
				:defFontSize="item.attributes.defFontSize"
				:activeFontBold="item.attributes.activeFontBold"
				:activeColor="item.attributes.activeColor"
				:defColor="item.attributes.defColor"
				:tabIndex="item.attributes.tabIndex"
				:props="item.attributes.props"
				:type="item.attributes.type"
				:backgroundColor="item.attributes.backgroundColor"
				:hasLine="item.attributes.hasLine"
				:lineType="item.attributes.lineType"
				:lineUseSlot="item.attributes.lineUseSlot"
				:lineColor="item.attributes.lineColor"
				:theme="item.attributes.theme"
				:itemFull="item.attributes.itemFull"
				></QS-Tabs>
			</block>
			<block v-else-if="item.type == 'QS-Grids'">
				<view @tap.stop="voidFn">
					<QS-Grids
					:compClass="item.attributes.compClass" 
					:compStyle="item.attributes.compStyle"
					:gridMinHeight="item.attributes.gridMinHeight"
					:badgeRight="item.attributes.badgeRight"
					:badgeTop="item.attributes.badgeTop"
					:badgeLeft="item.attributes.badgeLeft"
					:badgeBottom="item.attributes.badgeBottom"
					:row="item.attributes.row"
					:col="item.attributes.col"
					:paddingRow="item.attributes.paddingRow"
					:paddingCol="item.attributes.paddingCol"
					:iconSizeScale="item.attributes.iconSizeScale"
					:gridTextColor="item.attributes.gridTextColor"
					:gridTextSize="item.attributes.gridTextSize"
					:gridTextMarginTop="item.attributes.gridTextMarginTop"
					:mode="item.attributes.mode"
					:props="item.attributes.props"
					:gridOutline="item.attributes.gridOutline"
					:gridPadding="item.attributes.gridPadding"
					:iconBorderRadius="item.attributes.iconBorderRadius"
					:indicatorDots="item.attributes.indicatorDots"
					:indicatorDotsHieght="item.attributes.indicatorDotsHieght"
					:duration="item.attributes.duration"
					:circular="item.attributes.circular"
					:defCurrent="item.attributes.defCurrent"
					:previousMargin="item.attributes.previousMargin"
					:nextMargin="item.attributes.nextMargin"
					:indicatorColor="item.attributes.indicatorColor"
					:indicatorActiveColor="item.attributes.indicatorActiveColor"
					:autoplay="item.attributes.autoplay"
					:interval="item.attributes.interval"
					:gridsData="item.attributes.gridsData"
					:hideText="item.attributes.hideText"
					:iconWidth="item.attributes.iconWidth"
					:iconHeight="item.attributes.iconHeight"
					:iconMinHeight="item.attributes.iconMinHeight"
					:gridPaddingTop="item.attributes.gridPaddingTop"
					:gridPaddingBottom="item.attributes.gridPaddingBottom"
					:gridPaddingLeft="item.attributes.gridPaddingLeft"
					:gridPaddingRight="item.attributes.gridPaddingRight"
					:ellipsis="item.attributes.ellipsis"
					:useQSAnimation="item.attributes.useQSAnimation"
					:animationType="item.attributes.animationType"
					@gridClick="eventFn(item, $event)"
					></QS-Grids>
				</view>
			</block>
			<block v-else-if="item.type == 'QS-P'">
				<view @tap.stop="voidFn">
					<QS-P 
					:compStyle="item.attributes.compStyle"
					:compClass="item.attributes.compClass"
					:height="item.attributes.height" 
					:width="item.attributes.width" 
					:backgroundColor="item.attributes.backgroundColor" 
					:borderRadius="item.attributes.borderRadius" 
					:size="item.attributes.size"
					 @tap.stop="eventFn(item)"></QS-P>
				</view>
			</block>
			<block v-else-if="item.type == 'QS-Button'">
				<view @tap.stop="voidFn">
					<QS-Button
					:compStyle="item.attributes.compStyle"
					:compClass="item.attributes.compClass"
					:fontSize="item.attributes.fontSize || ''"
					:waves="item.attributes.waves"
					:txt="item.attributes.txt"
					:wavesColor="item.attributes.wavesColor"
					:theme="item.attributes.theme"
					:size="item.attributes.size"
					:disabled="item.attributes.disabled"
					:loading="item.attributes.loading"
					:plain="item.attributes.plain"
					:formType="item.attributes.formType"
					:openType="item.attributes.openType"
					:hoverStartTime="item.attributes.hoverStartTime"
					:hoverStayTime="item.attributes.hoverStayTime"
					:hoverClass="item.attributes.hoverClass"
					:preIconType="item.attributes.preIconType"
					:preIconColor="item.attributes.preIconColor"
					:setTimeoutClick="item.attributes.setTimeoutClick"
					:iconAnimationType="item.attributes.iconAnimationType"
					:height="item.attributes.height"
					@click="eventFn(item)"
					>
					</QS-Button>
				</view>
			</block>
			<block v-else-if="item.type == 'view'" @tap.stop="voidFn">
				<!-- 这里是div，因为支付宝小程序下 view标签会报错 -->
				<div 
				:style="item.attributes.compStyle" 
				:class="item.attributes.compClass"
				 @tap.stop="eventFn(item)">
					<QS-SuperComponent-Node v-if="item.res" :res="item.res" child></QS-SuperComponent-Node>
				</div>
			</block>
			<block v-else-if="item.type == 'image'" @tap.stop="voidFn">
				<image 
				:src="item.attributes.src" 
				:mode="item.attributes.mode" 
				:style="item.attributes.compStyle" 
				:class="item.attributes.compClass"
				 @tap.stop="eventFn(item)"></image>
			</block>
			<block v-else-if="item.type == 'text'" @tap.stop="voidFn">
				<text 
				:style="item.attributes.compStyle" 
				:class="item.attributes.compClass"
				 @tap.stop="eventFn(item)">{{item.text}}</text>
			</block>
			<block v-else-if="item.type == 'QS-SuperComponent'" @tap.stop="voidFn">
				<QS-SuperComponent-Node v-if="item.res" :res="item.res" child></QS-SuperComponent-Node>
			</block>
			<block v-else>
				<customComponents :item="item"></customComponents>
			</block>
		</block>
	</view>
</template>

<script>
	import QSComponentMixin from '../../mixins/QS-Components-Mixin.js';
	
	import QSNavbar from '../QS-Navbar/props.js';
	import QSTabs from '../QS-Tabs/props.js';
	import QSGrids from '../QS-Grids/props.js';
	import QSP from '../QS-P/props.js';
	import QSButton from '../QS-Button/props.js';
	
	// console.log('QSNavbar', QSNavbar);
	
	import customComponents from '@/QS-UI-CONFIG/components/QS-SuperComponent/components/customComponents.vue';
	
	const QSComponentMixinRes = QSComponentMixin({ componentType: 'QS-SuperComponent' });
	
	let preQSComponents = [ 
		{ name: 'QS-Navbar', props: QSNavbar }, 
		{ name: 'QS-Tabs', props: QSTabs }, 
		{ name: 'QS-Grids', props: QSGrids }, 
		{ name: 'QS-Button', props: QSButton }, 
		{ name: 'QS-P', props: QSP } ,
	]
	
	const QSComponentsKeys = preQSComponents.map(i=>i.name);
	preQSComponents = preQSComponents.map(i=>({ ...i, [`${i.name.replace(/\-/g, '')}Props`]: i.props, [`${i.name.replace(/\-/g, '')}PropsKeys`]: Object.keys(i.props) }));
	const QSComponents = {};
	preQSComponents.forEach(i=>{
		QSComponents[i.name.replace(/\-/g, '')] = i;
	})
	
	function resetRes(res) {
		if(!res.compStyle) res.compStyle = {};
		if(!res.compClass) res.compClass = {};
		res.type = 'QS-SuperComponent';
		if(res.elements && Array.isArray(res.elements)) {
			for(let i = 0; i < res.elements.length; i++) {
				const item = res.elements[i];
				if(!item.attributes) item.attributes = {};
				if(!item.attributes.compStyle) item.attributes.compStyle = {};
				if(!item.attributes.compClass) item.attributes.compClass = {};
				if(QSComponentsKeys.includes(item.type)) {
					QSComponents[item.type.replace(/\-/g, '')][`${item.type.replace(/\-/g, '')}PropsKeys`].forEach(i=>{
						if(item.attributes[i] == undefined) item.attributes[i] = QSComponents[item.type.replace(/\-/g, '')][`${item.type.replace(/-/g, '')}Props`][i].default;
						if(typeof item.attributes[i] == 'function') item.attributes[i] = item.attributes[i]();
					})
				}
				else if(item.type == 'image') {
					if(!item.attributes.src) item.attributes.src = '';
					if(!item.attributes.mode) item.attributes.mode = '';
				}else if(item.type == 'text') {
					if(!item.text) item.text = '';
				}
			}
		}
		return res;
	}
	
	export default {
		name:"QS-SuperComponent-Node",
		mixins: [QSComponentMixinRes.mixin],
		components: {
			customComponents,
		},
		inject: ['QSSuperComponent'],
		props: {
			// #ifdef MP-ALIPAY
			...QSComponentMixinRes.props,
			// #endif
			res: {
				type: Object,
				defualt: ()=>({ compStyle: {}, compClass: {}, elements:[] })
			}
		},
		computed: {
			QS_nCompStyle() {
				return this.nRes.compStyle;
			},
			QS_nCompClass() {
				return this.nRes.compClass;
			}
		},
		watch: {
			res: {
				handler() {
					this.init();
				},
				immediate: true
			}
		},
		data() {
			return {
				nRes: { compStyle: {}, compClass: {}, elements: [] }
			};
		},
		methods: {
			QSButtonClick(item) {
				
			},
			QSNavbarClick(item, index) {
				
			},
			QSGridsClick(item, count) {
				
			},
			eventFn() {
				const item = arguments[0];
				let target;
				if(item && typeof item == 'object') {
					if(item.type == 'QS-Grids') {
						target = item.attributes.gridsData[arguments[1]];
					}
				}
				if(target) {
					this.QSSuperComponent.$emit('click', target);
					return;
				}
				this.QSSuperComponent.$emit('click', ...arguments);
			},
			init() {
				const newRes = resetRes(JSON.parse(JSON.stringify(this.res)));
				this.nRes = newRes;
			},
			voidFn() {}
		}
	}
</script>

<style>
	
</style>
